import React, { useState } from 'react';
import NumberField from '../../../../components/common/NumberField';
import StatefulCalculationCard from '../../../../components/common/StatefulCalculationCard';
import ExportData from '../../../../components/common/ExportCalculateData';
import type { ResultItem } from '../../../../../shared/types';

/**
 * 表单数据类型定义
 * 定义了深埋溶洞计算所需的所有输入参数类型
 */
export interface FormValues {
  gamma_f: number;
  S: number;
  i: number;
  B_f: number;
}

/**
 * 表单计算结果类型定义
 * 定义了深埋溶洞计算的输出结果类型
 */
export interface FormResult {
  q: number;  
  h_q: number;
}

/**
 * 计算初始值配置
 * 设置表单字段的默认值，提供良好的用户体验
 */
const initialValues: FormValues = {
  gamma_f: 20.0,
  S: 5,
  i: 0.0,
  B_f: 5.0,
};

/**
 * 计算配置对象
 * 包含计算卡片的所有配置信息，如标签、计算类型、初始值、表单字段等
 */
const CalculationConfig = {
  key: 'DeepBuriedCalculation',
  label: '深埋溶洞计算',
  formKey: 'cave-soil-pressure',
  initialValues: initialValues,
  calculationType: 'cave-soil-pressure',
  /**
   * 结果格式化函数
   * 将计算结果转换为表格显示格式
   * @param data 计算结果数据
   * @returns 格式化后的结果数组
   */
  resultFormatter: (data: FormResult) => [
    { key: 'q', name: '土压力q', value: data.q, unit: 'kN/m³' },
    { key: 'h_q', name: '深度h_q', value: data.h_q, unit: 'm' },
  ],
  /**
   * 表单字段渲染函数
   * 定义需要显示在表单中的输入字段
   * @returns 表单字段组件
   */
  renderFormFields: () => (
    <>
      <NumberField name="gamma_f" label="土体重度γf (kN/m³)" required min={0} step={0.1} tooltip="土体的重度" />
      <NumberField name="S" label="围岩级别S" required min={0} max={10} step={1} tooltip="隧道围岩的级别" />
      <NumberField name="i" label="坡度i" required step={0.01} tooltip="地面坡度" />
      <NumberField name="B_f" label="隧道宽度Bf (m)" required min={0} step={0.1} tooltip="隧道的宽度" />
    </>
  ),
  /**
   * 计算公式
   * 使用LaTeX格式编写，用于在界面中显示计算公式
   */
  optimizedFormula: "当溶洞填充物较厚，隧道处于深埋状态时" +
    "\\\\q = \\gamma_f h_q \\" +
    "\\h_q = 0.45 \\times 2^{S-1} \\times [1 + i \\cdot (B_f - 5)]",
};

/**
 * 深埋溶洞计算卡片组件
 * 实现深埋溶洞土压力计算功能的UI组件
 * 使用StatefulCalculationCard作为基础组件，提供完整的计算功能
 */
const DeepBuriedCard: React.FC = () => {
  const [lastResults, setLastResults] = useState<ResultItem[] | null>(null);
  
  return (
    <StatefulCalculationCard
      title={CalculationConfig.label}
      formKey={CalculationConfig.formKey}
      initialValues={CalculationConfig.initialValues}
      renderFormFields={CalculationConfig.renderFormFields}
      calculationType={CalculationConfig.calculationType}
      resultFormatter={(data) => {
        const results = CalculationConfig.resultFormatter(data);
        setLastResults(results);
        return results;
      }}
      columnCount={1} // 使用1列布局
      tableHeight={300} // 设置表格高度为300px
      formula={CalculationConfig.optimizedFormula}
      exportComponent={(form) => (
        <ExportData
          siteName={CalculationConfig.label}
          inputs={form.getFieldsValue()}
          results={lastResults ? Object.fromEntries(lastResults.map(r => [r.key, r.value])) : {}}
          calculationType={CalculationConfig.calculationType}
        />
      )}
    />
  );
};

export default DeepBuriedCard;